import { memo, useCallback, useEffect, useRef, useState } from "react";
import {
  ActionType,
  PageContainer,
  ProTable,
} from "@ant-design/pro-components";
import CourseStyle from "./style";
import { columnsConfig, CourseType } from "./config";
import { useFetch_getCourses_service } from "../../service/course";
import { Button } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import Edit from "./cpms/edit";
import Order_time from "./cpms/order_time";
import { shallowEqual, useSelector } from "react-redux";
import { RootState } from "../../store";
import Card from "./cpms/card";

const course = memo(() => {
  const [pageCount, setPageCount] = useState(1);
  const [openDrawer, setOpenDrawer] = useState(false);
  const [openOrderTime, setOpenOrderTime] = useState(false);
  const [openCard, setOpenCard] = useState(false);
  const { refetch, data } = useFetch_getCourses_service(pageCount, 10);
  const [currentId, setCurrentId] = useState<undefined | string>(undefined);

  const { org } = useSelector(
    (state: RootState) => ({
      org: state.orgReducer.currentOrg,
    }),
    shallowEqual
  );

  // 改变门店刷新
  useEffect(() => {
    void actionRef?.current?.reload();
  }, [org]);

  const actionRef = useRef<ActionType>();

  const closeDrawer = useCallback((isEdit: boolean) => {
    setOpenDrawer(false);
    if (isEdit) {
      void actionRef?.current?.reload();
    }
  }, []);
  const closeOrderTime = useCallback(() => {
    setOpenOrderTime(false);
  }, []);
  const closeCard = useCallback(() => {
    setOpenCard(false);
  }, []);
  const pageListClick = (page: number) => {
    setPageCount(page);
  };
  const editClick = (id: string) => {
    setOpenDrawer(true);
    setCurrentId(id);
  };
  const orderTimeClick = (id: string) => {
    setOpenOrderTime(true);
    setCurrentId(id);
  };
  const cardClick = (id: string) => {
    setOpenCard(true);
    setCurrentId(id);
  };
  return (
    <CourseStyle>
      <PageContainer>
        <ProTable<CourseType>
          actionRef={actionRef}
          dataSource={data}
          form={{
            ignoreRules: false,
          }}
          columns={columnsConfig({ editClick, orderTimeClick, cardClick })}
          request={refetch}
          toolBarRender={() => [
            <Button
              key="add"
              type="primary"
              icon={<PlusOutlined />}
              onClick={() => {
                setOpenDrawer(true);
                setCurrentId(undefined);
              }}
            >
              新建
            </Button>,
          ]}
          pagination={{
            defaultPageSize: 10,
            showSizeChanger: false,
            onChange: pageListClick,
            current: pageCount,
          }}
        />
        {openDrawer && (
          <Edit open={openDrawer} close={closeDrawer} id={currentId} />
        )}
        {openOrderTime && (
          <Order_time
            id={currentId}
            open={openOrderTime}
            close={closeOrderTime}
          />
        )}
        {openCard && <Card open={openCard} close={closeCard} id={currentId} />}
      </PageContainer>
    </CourseStyle>
  );
});

export default course;
